<route lang="yaml">
  meta:
    title: 电工
</route>

<script setup>
import axios from 'axios'
// import { reject } from 'lodash-es'
import { computed, ref } from 'vue'

// 表格数据
const tableData = ref([])
// 筛选条件
const uniqueStatus = ref([{ text: '审核中', electricianState: 1 }, { text: '已认证', electricianState: 2 }, { text: '未通过', electricianState: 3 }, { text: '封禁', electricianState: 4 }])
const selectedName = ref('')
const selectedStatus = ref(2)
// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref(0)

function handlePageChange(page) {
  currentPage.value = page
  fetchData({})
}
// 放大图片
const isModalOpen = ref(false)
const currentImage = ref('')
function openImage(url) {
  currentImage.value = url
  isModalOpen.value = true
}
function closeModal() {
  isModalOpen.value = false
  currentImage.value = ''
}
// 对话框
const dialogVisible = ref(false)
const handleDialogVisible = ref(false)
const handleDialogTitle = ref('')
const dialogData = reactive({
  electricianAddress: '',
  electricianCity: '',
  electricianCode: '',
  electricianHead: '',
  electricianId: '',
  electricianIdBackImg: '',
  electricianIdCode: '',
  electricianIdFrontImg: '',
  electricianLatitude: '',
  electricianLoginState: '',
  electricianLongitude: '',
  electricianName: '',
  electricianNvqImg: '',
  electricianPhone: '',
  electricianProvince: '',
  electricianPwd: '',
  electricianRegion: '',
  electricianState: '',
  electricianStateRemarks: '',
})
// 展示业主详情对话框
function showDetail(row) {
  console.log(row)
  Object.keys(dialogData).forEach((key) => {
    dialogData[key] = row[key] !== undefined ? row[key] : ''
  })
  dialogVisible.value = true
  console.log(dialogData)
}
async function electricianStateUp({ electricianPhone = null, electricianState = null, electricianStateRemarks = null }) {
  console.log('electricianPhone,', electricianPhone, 'electricianState,', electricianState, 'electricianStateRemarks,', electricianStateRemarks)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/electrician/stateUp', {
      electricianPhone,
      electricianState,
      electricianStateRemarks,
    })
    if (response.data) {
      console.log('电工状态更改结果', response.data)
      window.location.reload()
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
// 对话框按钮1：审核中、2：已认证、3：未通过、4：封禁
function showHandleDialog({ title, electricianPhone }) {
  dialogVisible.value = false
  handleDialogTitle.value = title
  switch (title) {
    case '驳回认证':
      electricianStateUp({ electricianPhone, electricianState: 3 })
      break
    case '封禁':
      console.log('封禁')
      electricianStateUp({ electricianPhone, electricianState: 4 })
      // handleDialogVisible.value = true
      break
    case '通过':
      electricianStateUp({ electricianPhone, electricianState: 2 })
      break
    case '解除封禁':
      electricianStateUp({ electricianPhone, electricianState: 2 })
      break
    default:
      break
  }
}
const Reason = ref('')

//
async function fetchData({ }) {
  // console.log('electricianRegion', electricianRegion, 'electricianName', electricianName, 'electricianState', electricianState, 'pageNum', pageNum, 'pageSize', pageSize)
  console.log('currentPage', currentPage.value)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/electrician/findAllByCondition', {
      electricianName: selectedName.value,
      electricianState: selectedStatus.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value,
    })

    // 如果获取到数据，更新 dialogData
    if (response.data) {
      console.log('responseData', response.data)
      // Object.assign(dialogData, response.data)
      tableData.value = response.data.data.rows
      totalNum.value = response.data.data.total
      console.log('tableData')
      console.log(tableData.value)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
async function searchData() {
  currentPage.value = 1,
  fetchData({})
}
function formatState(row, column, cellValue) {
  switch (cellValue) {
    case 1:
      return '审核中'
    case 2:
      return '已认证'
    case 3:
      return '未通过'
    case 4:
      return '封禁'
    default:
      return '未知'
  }
}
onMounted(() => {
  fetchData({})
})
</script>

<template>
  <div class="dashboard">
    <div class="header">
      电工
    </div>
    <!-- 筛选区域 -->
    <el-row :gutter="20" class="filter-row">
      <el-col :span="4">
        <el-select v-model="selectedStatus" placeholder="请选择电工认证状态" clearable>
          <el-option
            v-for="status in uniqueStatus" :key="status.electricianState" :label="status.text"
            :value="status.electricianState"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input v-model="selectedName" style="width: 240px;" placeholder="请输入电工姓名" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" class="search-button" @click="searchData">
          搜索
        </el-button>
      </el-col>
    </el-row>
    <!-- 数据表格 -->
    <el-table :data="tableData" border class="table" style="width: 100%; cursor: pointer;" @row-click="showDetail">
      <el-table-column prop="electricianCode" label="电工编号" align="center" />
      <el-table-column prop="electricianName" label="电工姓名" align="center" />
      <el-table-column prop="electricianPhone" label="电工手机号" align="center" />
      <el-table-column prop="electricianState" label="认证状态" :formatter="formatState" align="center" />
      <el-table-column prop="electricianRegion" label="所在区域" align="center" />
      <el-table-column prop="electricianAddress" label="详细地址" align="center" />
      <!-- <el-table-column prop="actions" label="操作" align="center">
        <template #default>
          <el-button type="text" size="small" class="action-button">
            定向派遣
          </el-button>
          <el-button type="text" size="small" class="action-button">
            发布抢单
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" width="600px" title="电工详情">
      <div>
        <h3>电工信息：</h3>
        <p><strong>电工编号：</strong> {{ dialogData.electricianCode }}</p>
        <p><strong>电工姓名：</strong> {{ dialogData.electricianName || '暂无数据' }}</p>
        <p><strong>电工手机号：</strong> {{ dialogData.electricianPhone || '暂无数据' }}</p>
        <p><strong>所在区域：</strong> {{ dialogData.electricianRegion || '暂无数据' }}</p>
        <p><strong>详细地址：</strong> {{ dialogData.electricianAddress || '暂无数据' }}</p>
        <p><strong>评分：</strong> {{ dialogData.score || '暂无数据' }}</p>
        <!-- 图片 -->
        <h3>身份证人像面：</h3>
        <div v-if="dialogData.electricianIdFrontImg">
          <div class="image-container">
            <el-image
              :src="dialogData.electricianIdFrontImg" class="image-thumbnail"
              @click="openImage(dialogData.electricianIdFrontImg)"
            />
          </div>
        </div>
        <p v-else>
          暂无图片
        </p>
        <h3>身份证国徽面：</h3>
        <div v-if="dialogData.electricianIdBackImg">
          <div class="image-container">
            <el-image
              :src="dialogData.electricianIdBackImg" class="image-thumbnail"
              @click="openImage(dialogData.electricianIdBackImg)"
            />
          </div>
        </div>
        <p v-else>
          暂无图片
        </p>
        <h3>电工证：</h3>
        <div v-if="dialogData.electricianNvqImg">
          <div class="image-container">
            <el-image
              :src="dialogData.electricianNvqImg" class="image-thumbnail"
              @click="openImage(dialogData.electricianNvqImg)"
            />
          </div>
        </div>
        <p v-else>
          暂无图片
        </p>
        <!-- 放大显示的模态框 -->
        <div v-if="isModalOpen" class="modal" @click="closeModal">
          <img :src="currentImage" class="modal-image">
        </div>
        <div class="dialog-footer">
          <!-- 1：审核中、2：已认证、3：未通过、4：封禁 -->
          <el-button
            v-if="dialogData.electricianState === 1"
            @click="showHandleDialog({ title: '驳回认证', electricianPhone: dialogData.electricianPhone })"
          >
            驳回
          </el-button>
          <el-button
            v-if="dialogData.electricianState === 3"
            @click="showHandleDialog({ title: '通过', electricianPhone: dialogData.electricianPhone })"
          >
            通过
          </el-button>
          <el-button
            v-if="dialogData.electricianState === 2"
            @click="showHandleDialog({ title: '封禁', electricianPhone: dialogData.electricianPhone })"
          >
            封禁
          </el-button>
          <el-button
            v-if="dialogData.electricianState === 4"
            @click="showHandleDialog({ title: '解除封禁', electricianPhone: dialogData.electricianPhone })"
          >
            解除封禁
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 处理对话框 -->
    <el-dialog v-model="handleDialogVisible" :title="handleDialogTitle" @open="Reason = ''">
      <!-- 对话框内容 -->
      <p><strong>请填写驳回原因：</strong></p>
      <el-input v-model="Reason" style="width: 600px;" type="textarea" placeholder="请填写原因" clearable />
      <template #footer>
        <el-button @click="handleDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination">
        <el-pagination
          size="normal" background layout="prev, pager, next" :total="totalNum" class="mt-4" :default-page-size="pageSize"
          :current-page="currentPage" @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: center;
  width: 30%;
  padding: 10px 20px;
  margin-bottom: 20px;

  /* 将分页按钮居中 */
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.filter-row {
  margin-bottom: 20px;
}

.search-button {
  color: white;
  background: linear-gradient(45deg, #3b82f6, #06b6d4);
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}

.search-button:hover {
  background: linear-gradient(45deg, #06b6d4, #3b82f6);
}

.table {
  margin-top: 20px;
  overflow: hidden;
  border-radius: 8px;
}

.el-table {
  --el-table-row-hover-bg-color: rgb(14 95 255 / 50%);
}

.table >>> .el-table__header-wrapper th {
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background-color: #f3f4f6;
  border-bottom: 2px solid #e5e7eb;
}

.action-button {
  padding: 4px 8px;
  font-weight: bold;
  color: #3b82f6;
  background-color: antiquewhite;
  border-radius: 5px;
  transition: all 0.2s;
}

.action-button:hover {
  background-color: #5382df;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.pagination {
  bottom: 20px;
  display: flex;

  /* 将分页按钮居中 */
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  margin-top: 20px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 5%);
}

.pagination-wrapper {
  position: fixed;
  bottom: 20px;
  left: 280px;
  z-index: 10;
  align-items: center;
  width: 80%;
  padding: 10px 0;
}

/* 图片 */
.image-container {
  display: flex;

  /* 使用 flexbox 布局 */
  overflow-x: auto;

  /* 允许横向滚动 */
}

.image-thumbnail {
  width: 300px;

  /* 设定缩略图宽度 */
  height: 100px;

  /* 保持图片的纵横比并填满容器 */
  margin-right: 10px;

  /* 图片之间的间距 */
  cursor: pointer;

  /* 设定缩略图高度 */
  object-fit: cover;

  /* 鼠标悬停时显示为可点击 */
}

.modal {
  position: fixed;

  /* 固定定位 */
  inset: 0;

  /* 半透明黑色背景 */
  display: flex;
  align-items: center;

  /* 使用 flexbox 居中对齐 */
  justify-content: center;
  background: rgb(0 0 0 / 80%);
}

.modal-image {
  max-width: 90%;

  /* 最大宽度 */
  max-height: 90%;

  /* 最大高度 */
}
</style>
